import { Stethoscope, FlaskConical, Heart } from 'lucide-react';
export const ValueProps = () => {
  const values = [{
    icon: <Stethoscope size={36} className="text-[#0e4c92]" />,
    title: 'Doctor-Verified Insights',
    description: 'All our guides and reviews are verified by healthcare professionals to ensure accuracy.'
  }, {
    icon: <FlaskConical size={36} className="text-[#0e4c92]" />,
    title: 'Real-World Testing',
    description: 'We test products in real-life scenarios to give you honest, practical feedback.'
  }, {
    icon: <Heart size={36} className="text-[#0e4c92]" />,
    title: 'Safety-First Reviews',
    description: 'Your well-being is our priority. We emphasize safety in all our product evaluations.'
  }];
  return <div className="bg-white py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-[#0e4c92]">
            Why Trust MedSelectHub
          </h2>
          <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
            We're committed to helping you make the safest and most informed
            healthcare product decisions.
          </p>
        </div>
        <div className="mt-16 grid gap-8 md:grid-cols-3">
          {values.map((value, index) => <div key={index} className="flex flex-col items-center p-6 bg-[#f5f7fa] rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">
              <div className="p-3 bg-white rounded-full shadow-sm">
                {value.icon}
              </div>
              <h3 className="mt-5 text-xl font-semibold text-[#0e4c92]">
                {value.title}
              </h3>
              <p className="mt-3 text-center text-gray-600">
                {value.description}
              </p>
            </div>)}
        </div>
      </div>
    </div>;
};